<template>
  <div class="q-pa-md">
  <!-- <DxDataGrid
    id="gridContainer"
    :data-source="dataSource"
    key-expr="field1"
    :show-borders="true"
    :column-width="100"
  >
    <DxPaging :enabled="false"/>
    <DxScrolling column-rendering-mode="virtual"/>
  </DxDataGrid> -->
  <t-tree-list :columns="columns" key-expr="field1" :rows="dataSource">
        </t-tree-list>
        </div>
</template>
<script setup lang="ts">
import { DxDataGrid, DxScrolling, DxPaging } from 'devextreme-vue/data-grid';
import { generateData } from './Scrolling.ts';

const dataSource = generateData(50, 500);

const columns = Object.keys( dataSource[0]).map(key => ({
      dataField: key,
      caption: key,
      width: '100px',
    }))
</script>
<style>
#gridContainer {
  height: 440px;
}
</style>
